<template lang="html">
  <div class="">
    <span>
      <el-row>
        <el-col v-for="id in mediaSelectedIds" :span="7">
            <span v-for="item in mediaTableData">
                <span v-if="item.id === id && item.savename">
                  <el-badge value="X" type="danger" @click.native="clearOneMedia(item)">
                    <img :src="item.savename" class="avatar">
                    <div style="font-size: 10px">
                      {{ item.filename }}
                    </div>
                  </el-badge>
                </span>
            </span>
        </el-col>
<!--         v-if="!duoxuan && mediaSelectedIds.length > 0"-->
        <el-col :span="4" style="font-size: 80px;text-align: center;line-height: 200px;">
          <span @click="dialogVisible = true">
            +
          </span>
        </el-col>
      </el-row>
    </span>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :modal-append-to-body="false"
      :append-to-body="true">
      <el-tabs tab-position="left" :before-leave="switchTab">
        <el-tab-pane v-for="v in mediaGroupTableData" :label="v.name">
          <div key="fill" class="block">
            <span v-for="item in mediaTableData" v-if="item.group_id === v.id && item.savename"
                  style="font-size: 10px;display: block;float: left;text-align: center">
                <el-image
                  class="img"
                  :src="item.savename"
                  :style="mediaSelectedIds.indexOf(item.id) !== -1 ? 'border: 3px solid red;':''"
                  :media_id="item.id"
                  fit="fill"
                  :alt="item.filename"
                  @click="selectedOneMedia(item)"
                />
              <div style="font-size: 10px">
                {{ item.filename }}
              </div>
            </span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectedAllMedia()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'MediaSelect',
  props: {
    // eslint-disable-next-line vue/require-default-prop,vue/prop-name-casing
    media_ids: {
      type: Array
    },
    duoxuan: {
      // eslint-disable-next-line no-undef
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      imgSrc: null,
      mediaSelectedIds: [],
      mediaSearchForm: {},
      mediaTableData: [],
      mediaTableDataPaginateCurrentPage: 1,
      mediaTableDataPaginateTotal: 1,
      mediaTableDataPaginateLastPage: 1,
      mediaTableDataPaginateTotalPageSize: 10,
      mediaTableDataPaginateTotalPageSizes: [10, 20, 50, 100],
      mediaTab: [],
      mediaEditType: 'post',
      mediaDiaIsShow: false,
      mediaForm: {},
      mediaRules: {
        mobile_number: [{
          required: true,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          trigger: 'blur'
        }]
      },
      mediaGroupSearchForm: {},
      mediaGroupTableData: [],
      mediaGroupTableDataPaginateCurrentPage: 1,
      mediaGroupTableDataPaginateTotal: 1,
      mediaGroupTableDataPaginateLastPage: 1,
      mediaGroupTableDataPaginateTotalPageSize: 10,
      mediaGroupTableDataPaginateTotalPageSizes: [10, 20, 50, 100]
    }
  },
  created() {
    this.getMediaList(1, 10000)
    this.getMediaGroupList(1, 10000)
    this.mediaSelectedIds = this.media_ids
  },
  methods: {
    clearOneMedia(row) {
      for (let i = 0; i < this.mediaSelectedIds.length; i++) {
        if (this.mediaSelectedIds[i] === row.id) {
          this.mediaSelectedIds.splice(i, 1)
        }
      }

      this.$emit('selected_media_func', this.mediaSelectedIds)
    },
    selectedOneMedia(row) {
      if (this.mediaSelectedIds.indexOf(row.id) !== -1) {
        // 取消
        this.clearOneMedia(row)
        return
      }
      if (!this.duoxuan && this.mediaSelectedIds.length > 0) {
        this.$message.error('已经选中，不能多选')
        return false
      }
      this.mediaSelectedIds.push(row.id)
    },
    selectedAllMedia() {
      this.dialogVisible = false
      this.$emit('selected_media_func', this.mediaSelectedIds)
    },
    switchTab(tab, event) {
      console.log(this.mediaGroupTableData[tab], event)
    },
    mediaTableDataHandleSizeChange(val) {
      // 改变每页显示的条数
      this.mediaTableDataPaginateTotalPageSize = val
      this.getMediaList(1, this.mediaTableDataPaginateTotalPageSize)
    },
    mediaTableDataHandleCurrentChange(val) {
      this.mediaTableDataPaginateCurrentPage = val
      this.getMediaList(val, this.mediaTableDataPaginateTotalPageSize)
    },
    getMediaList(page = 1, limit = 10) {
      this.loading = true
      this.mediaSearchForm.page = page
      this.mediaSearchForm.limit = limit
      this.$store.dispatch('media/getMediaList', this.mediaSearchForm).then((res) => {
        this.mediaTableData = res.data.data
        this.mediaTableDataPaginateTotal = res.data.total
        this.mediaTableDataPaginateCurrentPage = res.data.current_page
        this.mediaTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getMediaGroupList(page = 1, limit = 10) {
      this.loading = true
      this.mediaGroupSearchForm.page = page
      this.mediaGroupSearchForm.limit = limit
      this.$store.dispatch('media/getMediaGroupList', this.mediaGroupSearchForm).then((res) => {
        this.mediaGroupTableData = res.data.data
        this.mediaGroupTableDataPaginateTotal = res.data.total
        this.mediaGroupTableDataPaginateCurrentPage = res.data.current_page
        this.mediaGroupTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteMedia(row) {
      // console.log(row)
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.$store.dispatch('media/deleteMedia', { id: row.id }).then((res) => {
            this.getMediaList()
            this.loading = false
            this.mediaDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editMedia() {
      switch (this.mediaEditType) {
        case 'post':
          this.$refs['mediaRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('media/postMedia', this.mediaForm).then((res) => {
                this.getMediaList()
                this.mediaForm = {}
                this.loading = false
                this.mediaDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
        case 'put':
          this.$refs['mediaRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('media/putMedia', this.mediaForm).then((res) => {
                this.getMediaList()
                this.mediaForm = {}
                this.loading = false
                this.mediaDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
      }
    },
    mediaDialog(type, row) {
      this.mediaDiaIsShow = true
      switch (type) {
        case 'post':
          this.mediaEditType = 'post'
          break
        case 'put':
          this.mediaEditType = 'put'
          // 这里一定要使用nextTick的方式赋值，不然会卡住input
          this.$nextTick(() => {
            //   this.$set(this.mediaForm, 'id', row.id)
          })
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
  padding: 18px;
  font-size: 10px;
}

.selected {
  border: 3px solid red;
}

.img {
  width: 200px;
  height: 200px;
  margin-right: 10px;
}

.avatar {
  width: 130px;
  height: 130px;
}
</style>
